<!-- 商家店铺页面 -->
<template>
	<view class="content">
		<uniNavBar
			:title='storeName' 
			leftIcon="left"
			leftText="返回"
			fixed='true'
			status-bar='true'
			@clickLeft="Back"
		></uniNavBar>
		<view class="head">
			<view class="store-head">
				<view class="store-head-item" v-for="(item,index) in items" :key="index"
					:class="current == index? 'f-active-color':''" @tap="onClickItem(item,index)">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="" style="margin-top: 30rpx;">
			<!-- 全部商品 -->
			<template v-if="current == 0">
				<CommodityList :dataList="goodsList" v-if="goodsList.length>=1"></CommodityList>
				<noData v-else></noData>
			</template>
			<!-- 促销商品 -->
			<template v-else-if="current == 1">
				<CommodityList :dataList="discountList" v-if="discountList.length>=1"></CommodityList>
				<noData v-else></noData>
			</template>
			<!--热销商品 -->
			<template v-else-if="current == 2">
				<CommodityList :dataList="hotList" v-if="hotList.length>=1"></CommodityList>
				<noData v-else></noData>
			</template>
			<!-- 推荐商品 -->
			<template v-else-if="current == 3">
				<CommodityList :dataList="recommendList" v-if="recommendList.length>=1"></CommodityList>
				<noData v-else></noData>
			</template>
		</view>
	</view>
</template>
<script>
	import CommodityList from '@/components/common/CommodityList.vue'
	import uniNavBar from '@/components/uni/uni-nav-bar/uni-nav-bar.vue'
	import $http from '@/common/api/request.js'
	import noData from '../../components/my_shop_store/noData.vue'
	export default {
		data() {
			return {
				current:0,
				// 订单数据
				data:{},
				// 店铺名称
				storeName:'',
				// 商品数据
				goodsList:[],
				discountList:[],
				hotList:[],
				recommendList:[],
				items:[
					{name:'全部',type:'allgoods'},
					{name:'促销商品',type:'discountgoods'},
					{name:'热销商品',type:'hotgoods'},
					{name:'推荐商品',type:'recommendgoods'}
				]
			}
		},
		components:{
			uniNavBar,
			CommodityList,
			noData
		},
		onLoad(e) {
			if(e.data){
				this.data = JSON.parse(e.data)
				this.storeName = this.data.storeName
			}
			this.getData()
		},
		methods: {
			Back(){
				uni.navigateBack({
					delta:1
				})
			},
			getData(){
				$http.request({
					url:'/getStoreShop',
					method:'POST',
					header:{
						token:true
					},
					data:{
						// 商品id
						shopId:this.data.shopId,
						// 店铺名称
						storeName:this.data.storeName,
						// 商品类型
						type:this.data.type
					}
				}).then((res)=>{
					this.goodsList = res
				}).catch(()=>{
					uni.showToast({
						title:"请求失败",
						icon:'none'
					})
				})
			},
			onClickItem(item,index){
				this.current = index
				if(index){
					if(index == 0){
						this.getData()
					}else{
						$http.request({
							url: '/getStoreShopItem',
							method: 'POST',
							header: {
								token: true
							},
							data:{
								// 商品id
								shopId:this.data.shopId,
								// 店铺名称
								storeName:this.data.storeName,
								// 商品类型
								type:item.type
							}
						}).then((res) => {
							if(index == 1){
								this.discountList = res
							}else if(index == 2){
								this.hotList = res
							}else if(index == 3){
								this.recommendList = res
							}
						}).catch(() => {
							uni.showToast({
								title: "请求失败了哦",
								icon: "error"
							})
						})
					}
				}
				
			},
		}
	}
</script>

<style scoped>
.text{
		height: 500rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.head{
		position: fixed;
		top: 106rpx;
		left: 0;
		z-index: 999;
	}
	.store-head{
		width: 750rpx;
		height: 50rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: aliceblue;
	}
</style>
